<template>
  <div class="appTemplate">
    <Header :title="'起步案例-文本内容'" :back="true"/>
    <main ref="threeView" class="main"></main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import {onMounted, ref} from "vue";
// 导入整个 three.js核心库
import * as THREE from 'three';
import { TextGeometry } from "&t/examples/jsm/geometries/TextGeometry";
import { Font, FontLoader } from "&t/examples/jsm/loaders/FontLoader";
// 导入判断WebGL工具
import WebGL from "@/utils/WebGL";
import {LineBasicMaterial, Mesh} from "three";


THREE.Cache.enabled = true;
// 定义three场景显示区域
const threeView = ref();
const txt = ref('three \npersonal \ncase \ncannot \nuse \nChinese');
let font: Font;
let text: Mesh<TextGeometry, LineBasicMaterial>;

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x5a1216 );
scene.fog = new THREE.Fog( 0xbe1480, 250, 1400 );
// 创建相机镜头
// 视野角度（fov）长宽比（aspect）近截面（near）远截面（far）
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1500);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 文本
const drawText = () => {
  camera.position.set( 0, 0, 600 );
  const material = new THREE.LineBasicMaterial( { color: 0xeea2a4 } );
  const geometry = new TextGeometry( txt.value, {
    font: font,
    size: 16,
    height: 20,
    curveSegments: 5,
    bevelEnabled: false,
  } );
  geometry.computeBoundingBox();
  let centerOffset = 0;
  if ( geometry.boundingBox) {
    centerOffset = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
  }
  // 将多个点链接起来
  const textMesh = new THREE.Mesh(geometry, material);
  textMesh.position.x = centerOffset;
  textMesh.position.y = 30;
  textMesh.position.z = 0;

  textMesh.rotation.x = 0;
  textMesh.rotation.y = Math.PI * 2;
  return textMesh;
}

onMounted(() => {
  if (WebGL.isWebGLAvailable()) {
    loadFont();
  } else {
    const warning = WebGL.getWebGLErrorMessage();
    threeView.value.appendChild(warning);
  }
})
// 加载字体
const loadFont = () => {
  const loader = new FontLoader();
  loader.load(`/src/assets/fonts/helvetiker_regular.typeface.json`, (loadFont: Font) => {
    font = loadFont;
    text = drawText();
    // 将文本内容加到场景中
    scene.add( text );
    renderer.setSize(threeView.value.offsetWidth - 15, threeView.value.offsetHeight - 15, true);
    threeView.value.appendChild(renderer.domElement);
    threeView.value.style.touchAction = "none";
    threeView.value.addEventListener( 'pointerdown', onPointerDown );
    renderer.render( scene, camera );
  })
}

const onPointerDown = (event: any) => {
  if ( event.isPrimary === false ) return;

  document.addEventListener( 'pointermove', onPointerMove );
  document.addEventListener( 'pointerup', onPointerUp );
}


function onPointerMove( event: any ) {

  if ( event.isPrimary === false ) return;

  const pointerX = event.clientX - (window.innerWidth / 2);

  const targetRotation = pointerX   * 0.02;
  scene.rotation.y += (targetRotation - scene.rotation.y) * 0.05;
  renderer.clear();
  renderer.render( scene, camera );
}

function onPointerUp(event: any) {

  if ( event.isPrimary === false ) return;

  document.removeEventListener( 'pointermove', onPointerMove );
  document.removeEventListener( 'pointerup', onPointerUp );

}

</script>

<style scoped>

</style>